.header
  color: #fff
  overflow: hidden
  background-color: rgba(7, 17, 27, 0.5)
  position: relative
  .content-wrapper
    position: relative
    padding: 24px 12px 18px 24px
    font-size: 0
    .avatar
      display: inline-block
      vertical-align: top
      img
        border-radius: 2px
    .content
      display: inline-block
      margin-left: 16px
      .title
        margin: 2px 0 8px 0
        .brand
          width: 30px
          height: 18px
          vertical-align: top
          display: inline-block
          bg-img("./img/brand")
          background-size: 30px 18px
          background-repeat: no-repeat
        .name
          margin-left: 6px
          font-size: 16px
          line-height: 18px
          font-weight: bold
      .description
        margin-bottom: 10px
        line-height: 12px
        font-size: 12px
      .support
        .icon
          display inline-block
          width: 12px
          height: 12px
          vertical-align top
          margin-right: 4px
          background-size: 12px 12px
          background-repeat: no-repeat
          &.decrease
            bg-img(base-img-url + "decrease_1")
          &.discount
            bg-img(base-img-url + "discount_1")
          &.guarantee
            bg-img(base-img-url + "guarantee_1")
          &.invoice
            bg-img(base-img-url + "invoice_1")
          &.special
            bg-img(base-img-url + "special_1")
        .text
          line-height: 12px
          font-size: 10px
    .support-count
      position: absolute
      bottom: 14px
      right: 12px
      padding: 0 8px
      height: 24px
      border-radius 14px
      background-color: rgba(0, 0, 0, 0.2)
      text-align: center
      .count
        font-size: 10px
        line-height: 24px
      .icon-keyboard_arrow_right
        margin-left: 1px
        font-size: 10px
        line-height: 24px
  .bulletin-wrapper
    height: 28px
    line-height: 28px
    padding: 0 22px 0 12px
    background-color: rgba(0, 0, 0, 0.2)
    position: relative
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    .bulletin-title
      display: inline-block
      width: 22px
      height: 12px
      vertical-align: top
      margin-top: 9px
      margin-right: 2px
      bg-img("./img/bulletin")
      background-size: 22px 12px
      background-repeat: no-repeat
    .bulletin-text
      margin-left: 2px
      font-size: 10px
    .icon-keyboard_arrow_right
      position: absolute
      font-size: 10px
      right: 12px
      top: 10px
  .background
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    z-index: -1
    filter: blur(10px)
  .detail
    position: fixed
    z-index: 100
    width: 100%
    height: 100%
    overflow: auto
    top: 0
    left: 0
    background-color: rgba(7, 17, 27, 0.8)
    &.fade-enter-active
      transition: opacity .5s
    &.fade-leave-active
      transition: opacity .2s ease
    &.fade-enter, &.fade-leave-active
      background-color: rgba(7, 17, 27, 0)
      opacity: 0
    .detail-wrapper
      min-height: 100%
      width: 100%
      .detail-main
        margin-top: 64px
        padding-bottom: 64px
        .name
          line-height: 16px
          text-align: center
          font-size: 14px
          font-weight: 700
        .star-wrapper
          margin-top: 18px
          padding: 2px 0
          text-align: center
        .title
          display: flex
          width: 80%
          margin: 28px auto 24px auto
          .line
            flex: 1
            position: relative
            top: -7px
            border-bottom: 1px solid rgba(255, 255, 255, 0.2)
          .text
            padding: 0 12px
            font-size: 14px
            font-weight: 700
        .supports
          width: 80%
          margin: 0 auto
          .support-item
            padding: 0 12px
            margin-bottom: 12px
            font-size: 0
            &:last-child
              margin-bottom: 0
            .icon
              display: inline-block
              width: 16px
              height: 16px
              vertical-align: top
              margin-right: 6px
              background-size: 16px
              background-repeat: no-repeat
              &.decrease
                bg-img(base-img-url + "decrease_2")
              &.discount
                bg-img(base-img-url + "discount_2")
              &.guarantee
                bg-img(base-img-url + "guarantee_2")
              &.invoice
                bg-img(base-img-url + "invoice_2")
              &.special
                bg-img(base-img-url + "special_2")
            .text
              line-height: 16px
              font-size: 12px
        .bulletin
          width: 80%
          margin: 0 auto
          .content
            padding: 0 12px
            line-height: 24px
            font-size: 12px
    .detail-close
      position: relative
      width: 32px
      height: 32px
      margin: -50px auto 0 auto
      clear: both
      font-size: 32px
